<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目分类管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片区域 -->
    <el-card >
        <el-row>
            <el-col>
                <el-button type="primary">添加分类</el-button>
            </el-col>
        </el-row>

        <!-- 分类列表区域 -->
        <el-table :data="catelist" style="width: 100%" border stripe>
          <el-table-column type="index" label="#" />
          <el-table-column prop="name" label="分类名"  />
          <el-table-column  label="操作" >
          </el-table-column>
        </el-table>

    </el-card>

  </div>
</template>

<script>
import { ElConfigProvider } from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { ArrowRight } from '@element-plus/icons-vue'
import { Search } from '@element-plus/icons-vue'
import qs from 'qs'
import {  ElMessageBox } from 'element-plus'
export default {
  components:{
    ArrowRight,
    ElConfigProvider,
    ElMessageBox

  },
  setup(){
    return{
      Search,
      locale: zhCn
    }
  },
    data(){
        return{
          //查询条件项目分类列表的参数对象
          queryInfo:{
            //当前页数
            pagenum:1,
            //当前每页显示多少调数据
            pagesize:2,
        
          },
          //项目分类数据列表
          catelist:[],
          total:0,

        }
    },

    created(){
      this.getCateList()

    },

    methods:{
      async getCateList(){
        const {data:res} =await this.$http.get('/my/project/cates',{ params:this.queryInfo})
        //console.log(res)
      if(res.meta.status!==200) {
        return this.$message.err('获取项目分类列表失败')
      }
      this.catelist=res.data.cate
      this.total=res.data.total

      }

    }

}
</script>

<style lang="less" scoped>

</style>